<template>
  <div class="main-content">
    <h1 style="margin: 5px 0">经纪人业绩排名表</h1>
    <div class="screen-frame clearfix" style="min-width: 1050px;">
      <div class="row">
        <div class="col-lg-3 col-md-3">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-md-4 col-sm-2 control-label label-title">楼盘名称：</label>
              <div class="col-md-4 col-sm-5 col-input">
                <el-select class="" v-model="params.premisesId" filterable placeholder="请选择" :clearable="true" style="width:200px;">
                  <el-option v-for="item in findPremisesList" :key="item.premisesId" :label="item.premisesName" :value="item.premisesId">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-lg-2 col-md-2 col-sm-2 control-label label-title">时间：</label>
              <div class="col-lg-5 col-md-5 col-sm-5 col-input">
                <DatePicker type="date" placeholder="开始日期" v-model="params.beginDate" style="width: 200px"></DatePicker>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-4 col-input" style="margin-left: 20px; text-align: center;">
                <DatePicker type="date" placeholder="结束日期" v-model="params.endDate" style="width: 200px"></DatePicker>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-3 col-md-3">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-lg-4 col-md-5 col-sm-4 control-label label-title">合作机构：</label>
              <div class="col-lg-4 col-md-6 col-sm-4 col-input">
                <el-select v-model="params.agentCompany" clearable filterable placeholder="请选择" @change="findAgencyDeptList" style="width:200px;">
                  <el-option v-for="item in orgList" :key="item.agentCompany" :label="item.agentCompanyName" :value="item.agentCompany">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-lg-4 col-md-4 col-sm-4 control-label label-title">选择部门：</label>
              <div class="col-lg-4 col-md-6 col-sm-4 col-input">
                <el-select v-model="params.deptId" clearable filterable placeholder="请选择" style="width:200px;">
                  <el-option v-for="item in agencyDeptList" :key="item.id" :label="item.departmentName" :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-3">
          <div class="form-group">
            <label class="col-lg-3 col-md-3 col-sm-3 control-label"></label>
            <div class="col-lg-6 col-md-6 col-sm-6 col-input">
              <button type="button" class="btn btn-theme" v-on:click="list(1)">查询</button>
              <button type="button" class="btn btn-theme" v-on:click="exportInfo" v-res="{code:'menu_0007_0007_0001'}">导出</button>
              <a :href="exportUrl" v-show="exportBtnShow" download="渠道分销机构经纪人业绩报表.xlsx" style="color: yellowgreen; padding-left: 20px;">
                点击下载
                <Icon type="md-cloud-download" size="16" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row" style="text-align: center;color: #f87242;" v-show="!show">
      没有查询到相应的数据
    </div>
    <div class="table table-striped table-bordered" v-show="show">
      <div class="table-responsive">
        <table class="table table-striped table-bordered min-width-790">
          <thead>
            <tr>
              <th width="20%">部门</th>
              <th width="7%">经纪人</th>
              <th width="6%">报备客户</th>
              <th width="8%">报备成功客户</th>
              <th width="6%">首访客户</th>
              <th width="6%">复访客户</th>
              <th width="6%">认筹客户</th>
              <th width="6%">认购客户</th>
              <th width="6%">签约客户</th>
              <th width="10%">签约业绩</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row,index) in effectList">
              <td style="text-align: left; font-weight: bold; font-size: 14px;">
                <label v-for="(item, index) in row.layer">&emsp;&emsp;</label>
                {{row.deptName}}
              </td>
              <td>{{row.userName}}</td>
              <td>{{row.countOne}}</td>
              <td>{{row.countTwo}}</td>
              <td>{{row.countThree}}</td>
              <td>{{row.countNine}}</td>
              <td>{{row.countFour}}</td>
              <td>{{row.countFive}}</td>
              <td>{{row.countSix}}</td>
              <td>{{row.dealAmount}}</td>
            </tr>
            <tr class="result-total">
              <td colspan="2">合计</td>
              <td>{{resultTotal.countOne}}</td>
              <td>{{resultTotal.countTwo}}</td>
              <td>{{resultTotal.countThree}}</td>
              <td>{{resultTotal.countNine}}</td>
              <td>{{resultTotal.countFour}}</td>
              <td>{{resultTotal.countFive}}</td>
              <td>{{resultTotal.countSix}}</td>
              <td>{{resultTotal.dealAmount}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="laypage_channel_cooorg_agent_report"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        premisesId: "",
        beginDate: this.utils.getCurrentMonthFirst(),
        endDate: this.utils.getCurrentMonthLast(),
        storeName: "",
        agentCompany: "",
        deptId: "",
        validateData: true,
      },
      effectList: [],
      findPremisesList: [],
      orgList: [],
      agencyDeptList: [],
      show: false,
      initFlag: true,
      resultTotal: {
        countOne: 0,
        countTwo: 0,
        countThree: 0,
        countFour: 0,
        countFive: 0,
        countSix: 0,
        countNine: 0,
        dealAmount: 0,
      },
      exportBtnShow: false,
      exportUrl: "",
    };
  },
  mounted: function() {
    var _self = this;
    //参数加载
    let routeParams = _self.$route.params;
    if (routeParams) {
      if (routeParams.beginDate) {
        _self.params.beginDate = routeParams.beginDate;
      }
      if (routeParams.endDate) {
        _self.params.endDate = routeParams.endDate;
      }
      if (routeParams.premisesId) {
        _self.params.premisesId = routeParams.premisesId;
      }
      if (routeParams.agentCompany) {
        _self.params.agentCompany = routeParams.agentCompany;
      }
      if (routeParams.deptId) {
        _self.params.deptId = routeParams.deptId;
      }
    }
    _self.findPremisesLists();
    _self.findOrgList();
  },
  methods: {
    list: function(pageNo) {
      var loadIndex = layer.load();
      var _self = this;
      if (pageNo) {
        _self.params.pageNo = 1;
      }
      var body = {};
      body.params = {
        pageNo: _self.params.pageNo,
        pageSize: _self.params.pageSize,
        beginDate: _self.utils.dateFormat(_self.params.beginDate, "yyyy-MM-dd"),
        endDate: _self.utils.dateFormat(_self.params.endDate, "yyyy-MM-dd"),
        agentCompany: _self.params.agentCompany,
        deptId: _self.params.deptId,
        premisesId: _self.params.premisesId,
      };

      let intervalDays = this.utils.intervalTime(body.params.beginDate, body.params.endDate);
      if(intervalDays > 31){
        layer.close(loadIndex);
        layer.msg("单次最多获取31天的数据!");
        return false;
      }

      var url =
        _self.utilHelper.apiUrl +
        "/api/channelreport/getChannelCooOrgAgentReport";
      _self.$http.post(url, body).then((response) => {
        layer.close(loadIndex);
        var body = response.body.resData;
        if (body.result == 0) {
          layer.msg("接口异常!");
        } else {
          _self.effectList = body.pageModel.rows;
          _self.setResultTotal();
          var totalPages = body.pageModel.totalPages;
          var current = body.pageModel.pageNumber;
          var total = body.pageModel.total;
          _self.show = total > 0 ? true : false;
          layui.laypage.render({
            elem: $("#laypage_channel_cooorg_agent_report"), //容器。值支持id名、原生dom对象，jquery对象,
            limit: _self.params.pageSize,
            curr: current,
            count: total,
            theme: "#f87242;", //皮肤
            first: "首页", //若不显示，设置false即可
            last: "尾页", //若不显示，设置false即可
            prev: "上一页", //若不显示，设置false即可
            next: "下一页", //若不显示，设置false即可
            limits: [10, 20, 50, 100, 200],
            layout: ["prev", "page", "next", "skip", "count", "limit"],
            jump: function(obj, first) {
              if (!first) {
                _self.params.pageNo = obj.curr;
                _self.params.pageSize = obj.limit;
                _self.list();
              }
            },
          });
        }
      });
    },
    findPremisesLists: function() {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getCaseMemberList";
      var body = {};
      body.params = {};
      _self.$http.post(url, body).then((response) => {
        _self.findPremisesList = response.body.resData.caseMemberList;
      });
    },
    findOrgList: function() {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getAgentOrgByDevOrg";
      var body = {};
      body.params = {};
      _self.$http.post(url, body).then((response) => {
        _self.orgList = response.body.resData.agentOrgList;
        if (_self.orgList.length > 0) {
          if (!_self.params.agentCompany) {
            _self.params.agentCompany = _self.orgList[0].agentCompany;
          }
        }
        if (!_self.params.deptId) {
          // 无部门条件,直接以机构查询
          _self.list();
        }
        _self.findAgencyDeptList();
      });
    },
    findAgencyDeptList: function(agentCompany) {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/agencyreport/getAgencyDept";
      var body = {};
      body.params = {
        agentCompany: _self.params.agentCompany,
      };
      _self.agencyDeptList = [];
      _self.$http.post(url, body).then((response) => {
        _self.agencyDeptList = response.body.resData.list;
        for (var ii = 0; ii < _self.agencyDeptList.length; ii++) {
          let dept = _self.agencyDeptList[ii];
          if (dept.layer && dept.layer > 0) {
            let space = "";
            for (let jj = 0; jj < dept.layer; jj++) {
              space += "　";
            }
            dept.departmentName = space + dept.departmentName;
          }
        }
        _self.list();
      });
    },
    findReportList: function() {
      var _self = this;
      _self.params.pageNo = 1;
      if (_self.initFlag) {
        _self.list();
      }
    },
    exportInfo: function() {
      var loadIndex = layer.load();
      var _self = this;
      var body = {};
      body.params = {
        pageNo: _self.params.pageNo,
        pageSize: _self.params.pageSize,
        beginDate: _self.utils.dateFormat(_self.params.beginDate, "yyyy-MM-dd"),
        endDate: _self.utils.dateFormat(_self.params.endDate, "yyyy-MM-dd"),
        agentCompany: _self.params.agentCompany,
        deptId: _self.params.deptId,
        premisesId: _self.params.premisesId,
        userId: window.localStorage.getItem("1_userId"),
      };

      let intervalDays = this.utils.intervalTime(body.params.beginDate, body.params.endDate);
      if(intervalDays > 31){
        layer.close(loadIndex);
        layer.msg("单次最多获取31天的数据!");
        return false;
      }

      var url =
        this.utilHelper.apiUrl +
        "/api/channelreport/exportChannelCooOrgAgentReport";
      _self.$http
        .get(url, { params: body.params, responseType: "blob" })
        .then((response) => {
          layer.close(loadIndex);
          _self.exportBtnShow = true;
          const blob = new Blob([response.body], {
            type: "application/vnd.ms-excel", // 将会被放入到blob中的数组内容的MIME类型
          });
          const objectUrl = URL.createObjectURL(blob);
          _self.exportUrl = objectUrl;
          layer.msg("内容已生成,请【点击下载】下载!", {
            time: 2000
          });
        });
    },
    setResultTotal() {
      var _self = this;
      _self.resultTotal = {
        countOne: 0,
        countTwo: 0,
        countThree: 0,
        countFour: 0,
        countFive: 0,
        countSix: 0,
        countNine: 0,
        dealAmount: 0,
      };
      for (var i in _self.effectList) {
        _self.resultTotal.countOne =
          Number(_self.resultTotal.countOne) +
          Number(_self.effectList[i].countOne);
        _self.resultTotal.countTwo =
          Number(_self.resultTotal.countTwo) +
          Number(_self.effectList[i].countTwo);
        _self.resultTotal.countThree =
          Number(_self.resultTotal.countThree) +
          Number(_self.effectList[i].countThree);
        _self.resultTotal.countFour =
          Number(_self.resultTotal.countFour) +
          Number(_self.effectList[i].countFour);
        _self.resultTotal.countFive =
          Number(_self.resultTotal.countFive) +
          Number(_self.effectList[i].countFive);
        _self.resultTotal.countSix =
          Number(_self.resultTotal.countSix) +
          Number(_self.effectList[i].countSix);
        _self.resultTotal.countNine =
          Number(_self.resultTotal.countNine) +
          Number(_self.effectList[i].countNine);
        _self.resultTotal.dealAmount =
          Number(_self.resultTotal.dealAmount) +
          Number(_self.effectList[i].dealAmount);
      }
    },
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);

      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    },
  },
};
</script>

<style scoped>
.label-title {
  padding-left: 0px;
  padding-right: 0px;
}
.col-input {
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 5px;
  margin-right: 5px;
}
</style>